<template>
  <div class="form-detail">
    <fks-form ref="detail-table" :model="tableForm" inline-message>
      <div class="table-theader">
        <span class="theader-name">
          <i
            style="vertical-align: middle; margin-right: 8px; font-size: 16px"
            class="fks-icon-text"
          />
          <span>{{ tableName }}</span>
        </span>
        <span v-if="!disabled" class="theader-btn">
          <fks-button type="plain" icon="fks-icon-plus" @click="add">
            {{ LANG.ADD }}
          </fks-button>
          <fks-button
            type="plain"
            icon="fks-icon-delete"
            size="small"
            :disabled="chosedData.length == 0"
            @click="deletField"
          >
            {{ LANG.DELETE }}
          </fks-button>
        </span>
      </div>
      <fks-table
        ref="detailTable"
        :data="tableForm.tableData"
        highlight-current-row
        border
        @selection-change="handleChange"
      >
        <!--        <fks-table-column width="14">-->
        <!--          <span class="moveBtn"></span>-->
        <!--        </fks-table-column>-->
        <fks-table-column
          v-if="!disabled"
          width="50"
          type="selection"
          align="center"
        />
        <fks-table-column width="50" type="index" align="center" label="#" />
        <fks-table-column
          v-for="item in tableColumnTemp"
          :key="JSON.stringify(item)"
          :fixed="item.fixed"
          :label="item.label"
          :min-width="item.columnWidth"
        >
          <template v-slot="slotProps">
            <fks-form-item
              :key="JSON.stringify(item)"
              :prop="'tableData.' + slotProps.$index + '.' + item.prop"
              :rules="item.rules"
            >
              <slot :name="item.prop" :col="item" :row="slotProps.row">
                <FormUpload
                  v-if="item.tagAttribute === 'upload'"
                  v-model="slotProps.row[item.prop]"
                  :disabled="disabled || item.disabled"
                  :file-list.sync="
                    slotProps.row[item.filesProp || item.prop + 'Files']
                  "
                  :files.sync="slotProps.row[item.files]"
                />
                <fks-select
                  v-else-if="item.tagAttribute === 'select'"
                  v-model="slotProps.row[item.prop]"
                  clearable
                  :disabled="disabled || item.disabled"
                >
                  <fks-option
                    v-for="(option, i) in item.options"
                    :key="option.label ? option.label : i"
                    :label="option.label"
                    :value="option.value"
                  />
                </fks-select>
                <fks-date-picker
                  v-else-if="item.tagAttribute === 'time'"
                  v-model="slotProps.row[item.prop]"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  :disabled="disabled || item.disabled"
                />
                <fks-user-selector
                  v-else-if="item.tagAttribute === 'user-selector'"
                  style="width: 100%"
                  :username.sync="slotProps.row[item.prop + '_username']"
                  :userfullname.sync="slotProps.row[item.prop]"
                  :disabled="disabled || item.disabled"
                />
                <fks-org-selector
                  v-else-if="item.tagAttribute === 'org-selector'"
                  style="width: 100%"
                  :dept-id.sync="slotProps.row[item.prop + '_deptId']"
                  :dept-name.sync="slotProps.row[item.prop]"
                  :disabled="disabled || item.disabled"
                />
                <fks-input
                  v-else-if="item.tagAttribute === 'comment'"
                  v-model="slotProps.row[item.prop]"
                  type="textarea"
                  :rows="item.rows ? item.rows : 3"
                  :disabled="disabled || item.disabled"
                  :maxlength="item.maxlength"
                  :show-word-limit="item.limit"
                />
                <fks-input
                  v-else
                  v-model="slotProps.row[item.prop]"
                  :disabled="disabled || item.disabled"
                  :maxlength="item.maxlength"
                  :show-word-limit="item.limit"
                />
              </slot>
            </fks-form-item>
          </template>
        </fks-table-column>
      </fks-table>
    </fks-form>
  </div>
</template>

<script>
import FormUpload from '@/modules/FormCenter/components/FormUpload'
export default {
  name: 'DetailTable',
  components: {
    FormUpload
  },
  props: {
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    formDetail: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableName: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    detailPermission: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      chosedData: [],
      flag: false,
      formDetailTemp: this.formDetail.map((item, index) => {
        const obj = {}
        Object.keys(item).forEach((key) => {
          obj[key] = item[key]
        })
        obj.delete_flag = '0'
        return obj
      })
    }
  },
  computed: {
    tableForm() {
      return {
        tableData:
          this.formDetailTemp.filter((item) => {
            return item.delete_flag == '0'
          }) || []
      }
    },
    tableColumnTemp() {
      let val = this.tableColumn.filter((column) => {
        let type = this.detailPermission[column.prop]
        if (type === 'hide') {
          column.hide = true
        } else if (type === 'readonly') {
          column.disabled = true
        } else {
          column.disabled = false
        }
        return !column.hide
      })

      return val
    }
  },
  watch: {
    formDetail: {
      handler(val) {
        this.flag = true
        this.formDetailTemp = val.map((item, index) => {
          const obj = {}
          Object.keys(item).forEach((key) => {
            obj[key] = item[key]
          })
          obj.delete_flag || (obj.delete_flag = '0')
          return obj
        })
      },
      deep: true
    },
    formDetailTemp: {
      handler(val) {
        if (!this.flag) {
          this.$emit(
            'update:formDetail',
            val.map((item, index) => {
              const temp = Object.assign({}, item)
              return temp
            })
          )
          this.$emit('detailTableChange', val)
        }
        this.flag = false
      },
      deep: true
    },
    //设置必填
    tableColumnTemp(columns) {
      columns.forEach((col) => {
        if (col.required) {
          col.rules = [{ required: true, trigger: 'change' }]
        }
      })
    }
  },
  methods: {
    add() {
      let tempObj = {}
      for (let i = 0; i < this.tableColumn.length; i++) {
        const item = this.tableColumn[i]
        tempObj[item.prop] = ''
      }
      tempObj.delete_flag = '0'
      this.flag = false
      this.formDetailTemp.push(tempObj)
    },
    deletField() {
      for (let i = 0; i < this.chosedData.length; i++) {
        this.chosedData[i].delete_flag = '-1'
      }
    },
    handleChange(val) {
      this.chosedData = val
    }
  }
}
</script>

<style lang="scss" scoped>
.form-detail {
  margin-bottom: 22px;
  //  ::v-deep  .fks-table--enable-row-hover .fks-table__body tr:hover > td {
  //   background-color: #fff;
  // }
  ::v-deep .fks-form-item {
    margin-bottom: 0;
  }

  .table-theader {
    margin-bottom: 16px;

    .theader-name {
      display: inline-block;
      height: 36px;
      font-weight: bold;
      line-height: 36px;

      span {
        font-size: 14px;
        color: #191919;
      }
    }

    .theader-btn {
      float: right;
    }
  }

  ::v-deep .fks-form-item__content {
    margin: 10px 0 !important;
  }

  ::v-deep .fks-table__empty-text {
    color: #999;
  }

  .moveBtn {
    display: block;
    width: 3px;
    height: 22px;
    margin: 0 -11px;
    border: 1px dotted #adadad;
    cursor: move;
  }
}

.sortable-ghost {
  color: #fff !important;
  background: #81baff !important;
  opacity: 0.8;
}

::v-deep .fks-button--medium {
  min-width: 72px;
  height: 32px;
  padding: 0;
}

::v-deep .fks-button--small {
  min-width: 72px;
  height: 32px;
  padding: 0;
}
</style>
